<template>
  <div style="height: 100%; display: flex; padding-bottom: 10px">
    <div style="width: 33%">
      <div style="width: 50%; margin: 10px 25% 0 25%" @click="selectItem(0)">
        <img class="img" src="../../assets/guanzhu.png" alt="" />
        <div class="title-text">关注</div>
      </div>
    </div>
    <div style="width: 33%">
      <div style="width: 50%; margin: 10px 25% 0 25%" @click="selectItem(1)">
        <img class="img" src="../../assets/fensi.png" alt="" />
        <div class="title-text">粉丝</div>
      </div>
    </div>
    <div style="width: 33%">
      <div style="width: 50%; margin: 10px 25% 0 25%" @click="selectItem(2)">
        <img class="img" src="../../assets/chuangzuo.png" alt="" />
        <div class="title-text">创作</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "RightHead",
  data() {
    return {
      selection: 2,
    };
  },
  methods: {
    selectItem(index) {
      this.selection = index;
      // console.log(this.selection);
      let selection = this.selection;
      this.$emit("tellFather", { selection });
    },
  },
};
</script>
<style scoped>
.img {
  width: 100%;
  /* height: 50%; */
  border-radius: 50%;
}
.title-text {
  font-size: 13px;
  margin-left: 25%;
}
</style>
